<template>
  <div class="login">
    <div class="title">
      <h1>高洁集团智慧公厕管理系统</h1>
    </div>
    <div class="login_L">
      <a-form
        id="components-form-demo-normal-login"
        :form="form"
        class="login-form"
        @submit="handleSubmit"
      >
        <a-form-item>
          <span style="color:white;width:15%;display:inline-block">账号：</span>
          <a-input
          style="width:85%"
            v-decorator="[
              'username',
              {
                rules: [{ required: true, message: '请输入账号!' }],
              },
            ]"
            placeholder="账号"
          >
            <a-icon
              slot="prefix"
              type="user"
              style="color: rgba(0, 0, 0, 0.25)"
            />
          </a-input>
        </a-form-item>
        <a-form-item>
          <span style="color:white;width:15%;display:inline-block">密码：</span>
          <a-input
          style="width:85%"
            v-decorator="[
              'password',
              {
                rules: [{ required: true, message: '请输入密码!' }],
              },
            ]"
            type="password"
            placeholder="密码"
          >
            <a-icon
              slot="prefix"
              type="lock"
              style="color: rgba(0, 0, 0, 0.25)"
            />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-checkbox
            v-decorator="[
              'remember',
              {
                valuePropName: 'checked',
                initialValue: true,
              },
            ]"
          >
            <span style="color:white">记住密码</span>
          </a-checkbox>
          <!-- <a class="login-form-forgot" href=""> Forgot password </a> -->
          <a-button type="primary" html-type="submit" class="login-form-button">
            登录
          </a-button>
          <!-- Or
          <a href=""> register now! </a> -->
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import baseUrl from "../../api/baseUrl";
import axios from "../../utils/axios";
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "normal_login" });
  },
  mounted(){
    this.getCookie()
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
          const that = this
          if(values.remember){
            console.log("checked == true");
            that.setCookie(values.username,values.password,7)
          }else{
            that.clearCookie()
          }
          let username = values.username;
          let password = values.password;
          let url = `${baseUrl}/login/`;
          axios
            .post(url, { username, password })
            .then((res) => {
              let sessionId = localStorage.setItem("sessionId", res.token);
              this.$router.replace({ path: "/homePage" });
              this.$store.commit("cardData", "首页");
            })
            .catch((error) => {
              this.$message.error("账号或密码错误");
            });
        }
      });
    },
    //设置cookie
    setCookie(c_name, c_pwd, exdays) {
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      window.document.cookie =
        "username" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
    },
    //读取cookie
    getCookie: function () {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("="); //再次切割
          //判断查找相对应的值
          if (arr2[0] == "username") {
            this.username = arr2[1]; //保存到保存数据的地方
          } else if (arr2[0] == "password") {
            this.password = arr2[1];
          }
        }
      }
    },
    //清除cookie
    clearCookie: function () {
      this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
    },
  },
};
</script>

<style lang="less">
.login {
  #components-form-demo-normal-login .login-form {
    max-width: 300px;
  }
  #components-form-demo-normal-login .login-form-forgot {
    float: right;
  }
  #components-form-demo-normal-login .login-form-button {
    width: 100%;
  }
  width: 100%;
  height: 100%;
  position: relative;
  background: url(../../assets/img/login_bg1.jpg) no-repeat;
  background-size: 100% 100%;
  .login_L {
    background: rgba(0,0,0,0.4);
    opacity: .8;
    width: 20%;
    position: absolute;
    right: 20%;
    top: 45%;
    padding: 2%;
    border: 1px solid gainsboro;
    border-radius: 12px;
  }
  .title{
    padding: 25px;
    h1{
      color: white;
      text-align: center;
      margin: 0;
      font-size: 42px;
      font-family: cursive;
    }
  }
  
}
</style>